<template>
  <div class="dashboard">
    首页---{{ num }}
    <button @click="$router.push('/dashboard?id='+Date.now())">跳转路由</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 123
    }
  },
  created() {
    console.log('接口调用')
  },
  beforeRouteEnter(to, from, next) {
    // 能不能用this,不能用，我想用怎么办？next(vm=>  vm相当于this)
    // console.log(this.num)
    console.log('beforeRouteEnter')
    next((vm) => {
      // vm就是当前组件的this
      console.log(vm.num)
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 路由传值变了
    console.log('beforeRouteUpdate', to.query.id)
    console.log('接口调用2')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }

}
</script>
<style lang="scss" scoped>
// @代表src html 与js 代表src   style 中是~@代表src,
// vue-cli5.x版本 @ 在html 与js 代表src   style 中是~@/@代表src
.dashboard{
  background:url("~@/assets/common/login.jpg");
}

</style>
